<template>
  <div class="passport-forget">
    <div class="page-header">
      <h1><small>忘记登录密码？</small>输入要找回的鲁能体育帐号</h1>
    </div>
    <el-form :label-position="labelPosition" :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="forgetForm">
      <el-form-item label="鲁能体育帐号" prop="account" class="form-item">
        <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="手机号/用户名/邮箱"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="captcha" class="form-item">
        <el-input placeholder="请输入验证码" v-model="ruleForm2.captcha" auto-complete="off">
          <template slot="append">1234</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="submitForm('ruleForm2')" class="btn-block" :loading="false">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    var validateAccount = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请输入鲁能体育帐号'))
      } else {
        callback()
      }
    }
    var validateCaptcha = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请输入验证码'))
      } else {
        callback()
      }
    }
    return {
      labelPosition: 'top',
      ruleForm2: {
        account: '',
        captcha: ''
      },
      rules2: {
        account: [{ validator: validateAccount, trigger: 'blur' }],
        captcha: [{ validator: validateCaptcha, trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.axios
            .post('/passport/forget', this.$refs[formName].model)
            .then(response => {
              let routeName = 'passport/' + response.data.data.type
              // this.$router.push({name: 'passport/:route', params: response.data.data })
              this.$router.push({
                name: routeName,
                params: response.data.data
              })
            })
            .catch(function (error) {
              console.log(error)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.page-header {
  padding: 0.5rem 0.3rem;
  text-align: left;
}
.page-header h1 {
  font-size: 0.44rem;
  font-weight: normal;
}
.page-header small {
  font-size: 60%;
  display: block;
}
.forgetForm {
  padding: 0 0.3rem;
}
.form-item {
  margin: 0;
}
.el-form-item >>> label {
  padding: 0;
  vertical-align: bottom;
  line-height: 0.48rem;
}
.el-input >>> input {
  border-width: 0 0 1px;
  border-radius: 0;
  padding: 0 0 0 0.1rem;
}
.btn-block {
  display: block;
  width: 100%;
  margin: 0.5rem 0 0;
}
h1,
h2 {
  font-weight: normal;
  color: #000;
  font-size: 0.4rem;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
